<template>
  <div class="announcement-list">
    <div class="announcement-header">
      <span class="title">最新公告</span>
      <el-button 
        type="text" 
        class="refresh-btn" 
        @click="handleRefresh"
        :loading="loading"
      >
        <i class="el-icon-refresh"></i>
        刷新
      </el-button>
    </div>
    
    <div class="announcement-content">
      <div 
        v-for="announcement in announcements" 
        :key="announcement.announcement_id"
        class="announcement-item"
        :class="{ unread: !announcement.isRead }"
        @click="handleAnnouncementClick(announcement)"
      >
        <div class="announcement-main">
          <div class="announcement-title">
            <el-tag v-if="!announcement.isRead" size="small" type="danger" class="new-tag">新</el-tag>
            <span class="title-text">{{ announcement.title }}</span>
          </div>
          <div class="announcement-content-preview">
            {{ announcement.content }}
          </div>
          <div class="announcement-meta">
            <span class="time">{{ formatTime(announcement.created_at) }}</span>
          </div>
        </div>
        <div class="announcement-arrow">
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
      
      <div v-if="announcements.length === 0" class="empty-state">
        <i class="el-icon-bell" style="font-size: 48px; color: #c0c4cc; margin-bottom: 16px;"></i>
        <p>暂无公告</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  announcements: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['announcement-click', 'refresh'])

const loading = ref(false)

const handleAnnouncementClick = (announcement) => {
  // 标记为已读
  if (!announcement.isRead) {
    announcement.isRead = true
  }
  emit('announcement-click', announcement)
}

const handleRefresh = async () => {
  loading.value = true
  try {
    await emit('refresh')
    ElMessage.success('公告已刷新')
  } catch (error) {
    ElMessage.error('刷新失败')
  } finally {
    loading.value = false
  }
}

const formatTime = (timeString) => {
  const date = new Date(timeString)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  
  // 如果是今天
  if (date.toDateString() === now.toDateString()) {
    return date.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit' 
    })
  }
  
  // 如果是昨天
  const yesterday = new Date(now)
  yesterday.setDate(yesterday.getDate() - 1)
  if (date.toDateString() === yesterday.toDateString()) {
    return '昨天 ' + date.toLocaleTimeString('zh-CN', { 
      hour: '2-digit', 
      minute: '2-digit' 
    })
  }
  
  // 一周内
  if (diff < 7 * 24 * 60 * 60 * 1000) {
    const days = Math.floor(diff / (24 * 60 * 60 * 1000))
    return `${days}天前`
  }
  
  // 更早的时间
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit'
  })
}
</script>

<style scoped>
.announcement-list {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}

.announcement-list:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.announcement-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
}

.refresh-btn {
  color: #409eff;
  font-size: 14px;
}

.refresh-btn:hover {
  color: #66b1ff;
}

.announcement-content {
  max-height: 400px;
  overflow-y: auto;
}

.announcement-item {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
  border: 1px solid transparent;
}

.announcement-item:hover {
  background-color: #f5f7fa;
  border-color: #e4e7ed;
  transform: translateY(-2px);
}

.announcement-item.unread {
  background-color: #f0f7ff;
  border-left: 3px solid #409eff;
}

.announcement-main {
  flex: 1;
  min-width: 0;
}

.announcement-title {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.new-tag {
  margin-right: 8px;
  height: 20px;
  line-height: 18px;
}

.title-text {
  font-weight: 500;
  color: #303133;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-content-preview {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.announcement-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #909399;
}

.time {
  display: flex;
  align-items: center;
}

.time::before {
  content: "🕒";
  margin-right: 4px;
}

.announcement-arrow {
  color: #c0c4cc;
  transition: all 0.3s ease;
}

.announcement-item:hover .announcement-arrow {
  color: #409eff;
  transform: translateX(4px);
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.empty-state p {
  margin: 0;
  font-size: 14px;
}

/* 滚动条样式 */
.announcement-content::-webkit-scrollbar {
  width: 6px;
}

.announcement-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.announcement-content::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.announcement-content::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

@media (max-width: 768px) {
  .announcement-list {
    padding: 16px;
  }
  
  .announcement-item {
    padding: 12px;
  }
  
  .title {
    font-size: 16px;
  }
}
</style>